<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-13 23:13:44
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-17 23:48:11
 * @FilePath: /chat-ai-plus/src/pages/payment/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <scroll-view :scroll-top="0" scroll-y="true" class="full">
  <view class="container page full">
    <view class="row justify-content-center">
      <view class="col-12 col-sm-8 col-md-6 col-xl-4 p_lg">
        <view class="align-items_center justify_center mt_lg">
          <view>
            <u-image
              mode="aspectFill"
              width="120px"
              height="70px"
              src="/static/images/logo@2x.png"
            ></u-image>
          </view>
        </view>
        <view class="h1 t_center my_lg"> {{ $t('payment.heading') }}</view>
        <view class="section pitch_default">
          <view class="row">
            <view class="align-items_center gap_xs size_lg">
              <u-icon name="share"  size="20" ></u-icon>
              {{ $t('payment.list.chat') }}
            </view>
          </view>
          <view class="row">
            <view class="align-items_center gap_xs size_lg">
              <u-icon name="order"  size="20" ></u-icon>
              {{ $t('payment.list.answers') }}
            </view>
          </view>
          <view class="row">
            <view class="align-items_center gap_xs size_lg">
              <u-icon name="clock"  size="20" ></u-icon>
              {{ $t('payment.list.history') }}
            </view>
          </view>
          <view class="row">
            <view class="align-items_center gap_xs size_lg">
              <u-icon name="kefu-ermai"  size="20" ></u-icon>
              {{ $t('payment.list.ai') }}
            </view>
          </view>
        </view>

        <view class="py_lg">
          <radio-group class="plans my_lg" @change="handleChange">
            <view>
              <label class="plan-label" >
                <radio class="hide" value="plan1" />
                <view class="align-items_center justify_between plan-item" :class="{'active': plan === 'plan1'}">
                  <view>
                    <view>{{ $t('payment.plan.year.title') }}</view>
                    <view>{{ $t('payment.plan.year.discount') }}</view>
                  </view>
                  <view>
                    <view>{{ $t('payment.plan.year.price') }}</view>
                    <view>{{ $t('payment.plan.year.introduce') }}</view>
                  </view>
                </view>
              </label>
            </view>
            <view class="pt_xs">
              <label class="plan-label">
                <radio class="hide"   value="plan2"/>
                <view class="align-items_center justify_between plan-item" :class="{'active': plan === 'plan2'}">
                  <view>
                    <view>{{ $t('payment.plan.weekly.title') }}</view>
                    <view>{{ $t('payment.plan.weekly.discount') }}</view>
                  </view>
                  <view>
                    <view>{{ $t('payment.plan.weekly.price') }}</view>
                    <view>{{ $t('payment.plan.weekly.introduce') }}</view>
                  </view>
                </view>
              </label>
            </view>
          </radio-group>
        </view>

        <view>
          <u-button  :text="$t('payment.submit')"  type="primary" size="large"></u-button>
        </view>
        <view class="justify_between py_lg">
          <view>{{$t('payment.intro[0]') }}</view>
          <view>{{$t('payment.intro[1]') }}</view>
          <view>{{$t('payment.intro[2]') }}</view>
        </view>
        <view class="align-items_center justify_center mt_lg">
          <u-image
            mode="aspectFill"
            width="60px"
            height="35px"
            src="/static/images/logo@2x.png"
          ></u-image>
        </view>
      </view>
    </view>
  </view>
</scroll-view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useNavigationBar } from '@/pages/hooks';
export default defineComponent({
  name: 'Payment',
  setup() {
    useNavigationBar('payment')
    const plan = ref('plan1');
    const handleChange = (event) => {

      plan.value = event.detail.value
    }


    return {
      plan,
      handleChange
    }


  }
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';


.plans {
  .plan-item {
    border: solid 1px map-get($theme-colors, primary);
    border-radius: $radius;
    padding: map-get($spaces, sm);
    // background: #0f324c;
    &.active{
      border: solid 1px map-get($theme-colors, primary);
      background: map-get($theme-colors, primary);
      color: $white-color;
    }
  }

}
</style>

